<template>
  <view class="outReport_container">
    <fl-navBar
      dark
      :border="false"
      title="会议室预定"
      color="#333333"
      :fixed="true"
      left-icon="left"
      background-color="#fff"
      status-bar
    />
    <view class="tabs_box">
      <view
        :class="{ act: current === index }"
        class="tab_item"
        @tap="handleClick(ele, index)"
        v-for="(ele, index) in list"
        :key="index"
      >
        {{ ele.name }}
        <text :class="current === index ? 'border acborder' : 'border'"></text>
      </view>
    </view>
    <view class="outReport_content">
      <AskApply v-if="current == 0" />
      <!-- <BossApprove :isLoad="isLoad" v-if="current == 1" /> -->
      <History :isLoad="isLoad" v-if="current === 1 " />
    </view>
  </view>
</template>
<script setup>
import History from "./History.vue";
import AskApply from "./AskApply.vue";
import BossApprove from "./BossApprove.vue";
import { ref } from "vue";
import auth from "@/plugins/auth";
import { onLoad, onShow } from "@dcloudio/uni-app";
const list = ref([
  { name: "会议室预定", type: 0 },
  // { name: "审批", type: 1 },
  { name: "历史记录", type: 2 },
]);
const isLoad = ref("");
const current = ref(0);
const type = ref(0);
const handleClick = (ele, index) => {
  current.value = index;
  type.value = ele.type;
};
onShow(() => {
  uni.$on("loadList", () => {
    isLoad.value = new Date().getTime() + Math.random();
    uni.$off("loadList");
  });
});
onLoad(() => {
  // console.log(auth.hasPermi('oa:out:own'),'出行报备');
  // console.log(auth.hasPermi('oa:out:chk'),'报备审核');
  if (auth.hasPermi("oa:out:chk") && !auth.hasPermi("oa:out:own")) {
    current.value = 1;
  }
});
</script>

<style scoped lang="scss">

.outReport_container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  background-color: #fff;

  .tabs_box {
    display: flex;
    width: 90%;
    margin: 10rpx auto 0;
    height: 70rpx;

    .tab_item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      font-size: 32rpx;
      color: #333333;

      .border {
        position: absolute;
        bottom: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 66rpx;
        height: 7rpx;
        background-color: transparent;
        border-radius: 3rpx;
      }

      .acborder {
        background-color: #0d80d7;
      }
    }

    .act {
      color: #0d80d7;
    }
  }

  .outReport_content {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
}
</style>
